<template>
  <div>
    <div class="tree-left">
      <Table border stripe show-header :columns="tableColumns"
        :data="allMenus" width="670" height="380"></Table>
    </div>
    <div class="action-right">
      <Button type="primary" @click="showAddMenu">增加菜单</Button>
    </div>
    <AddNewMenu :showModal="showNewMenuModal" v-on:closeAddMenu="onCloseAddMenuModal"></AddNewMenu>
    <EditMenu :showModal="showEditMenuModal" v-on:closeEditMenu="onCloseEidtMenuModal" :menuData="editData"></EditMenu>
  </div>
</template>

<script>
import {getAllMenu, getMenuVOList} from '@/api/menu.js'
import AddNewMenu from './AddMenuModal.vue'
import EditMenu from './EditMenuModal.vue'
export default {
  data () {
    return {
      allMenus: [],
      tableColumns: [
        // {type: 'selection', width: 60, align: 'center'},
        {title: 'Id', key: 'id', width: 70},
        {title: '父节点', key: 'parentId', width: 80},
        {title: '排序', key: 'sort', width: 70},
        {title: '名字', key: 'nickName'},
        {title: '路由名', key: 'menuName'},
        {
          title: '操作',
          key: 'action',
          width: 80,
          align: 'center',
          render: (h, params) => {
            // console.log(h, params)
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: () => {
                    let idx = params.index
                    let tableCell = this.allMenus[idx]
                    console.log('tableCell', tableCell)
                    this.editData = tableCell
                    this.showEditMenu()
                  }
                }
              }, '编辑')
            ])
          }
        }
      ],
      showNewMenuModal: false,
      showEditMenuModal: false,
      editData: {}
    }
  },
  components: {
    AddNewMenu, EditMenu
  },
  methods: {
    showAddMenu () {
      console.log('show add menu')
      this.showNewMenuModal = true
    },
    onCloseAddMenuModal () {
      this.showNewMenuModal = false
      this.onGetAllMenu()
    },
    showEditMenu () {
      console.log('show edit menu')
      this.showEditMenuModal = true
    },
    onCloseEidtMenuModal () {
      this.showEditMenuModal = false
      this.onGetAllMenu()
    },
    onGetAllMenu () {
      getAllMenu().then(data => {
        if (!data) {
          return
        }
        let menuAll = getMenuVOList(data)
        let vos = []
        for (let i = 0; i < menuAll.length; i++) {
          let mvo = menuAll[i]
          mvo.nickName = mvo.name
          vos.push(mvo)
          if (menuAll[i].children.length > 0) {
            for (let j = 0; j < menuAll[i].children.length; j++) {
              let vo = menuAll[i].children[j]
              vo.nickName = menuAll[i].name + ' > ' + vo.name
              vos.push(vo)
            }
          }
        }
        this.allMenus = vos
      })
    }
  },
  created () {
    // console.log('getFetchedData', getFetchedData(KEYS.ALL_MENUS))
    this.onGetAllMenu()
  }
}
</script>

<style>
.tree-left{
  float: left;
}
.action-right{
  float: right;
}
</style>
